<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热点图案例</title>
    <style>
        /* 原理 用三个圆圈 进行无限放大 利用绝对定位脱标的特点将三个圆圈套在远点上 */
        body{
            background-color: #333;
        }
        .map{
            width: 747px;
            height: 617px;
            margin: 200px auto;
            background: url('../image/map.png') no-repeat;
            position: relative;
        }
        .city{
            position: absolute;
            /* 这里使用 top 和 right 去调位置  他孩子调位置也得用 top right     如果用 bottom调 里面有top 和 bottom  时优先top值 */
            top: 228px;
            right: 205px;
            
        }
        .dott{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #009dfd;
        }
        .tb{
            top: 500px;
            right: 84px;
        }
        .gz{
            top: 542px;
            right: 193px;
        }
        /* 属性选择器 */
        .city div[class ^= "plus"]{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width: 8px;
            height: 8px;
            /* box-shadow 参数： 水平 垂直 阴影 */
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50px;
            /* 调用动画部分 */
            animation: plus 2s linear infinite;
        }
        /* 将plus123 分别错开时间 进行扩大  注意权重的问题*/
        .plus2{
          animation-delay: 0.7s !important;
        }
        .plus3{
          animation-delay: 1.5s !important;
        }
        /* 写动画部分 */
        /* 定义动画 */
        @keyframes plus{
            0%{}
            70%{
                /* 这里使用宽高是因为 不会把盒子阴影变大  scale则会把盒子的阴影变大 */
                width: 40px;
                height: 40px;
                /* 这个时候把透明度改为1  之后结束的时候在淡化0 */
                opacity: 1;
            }
            100%{
                width: 70px;
                height:70px;
                opacity: 0;
            }
        }
        </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dott"></div>
            <div class="plus1"></div>
            <div class="plus2"></div>
            <div class="plus3"></div>
        </div>
        <div class="city tb">
            <div class="dott"></div>
            <div class="plus1"></div>
            <div class="plus2"></div>
            <div class="plus3"></div>
        </div>
        <div class="city gz">
            <div class="dott"></div>
            <div class="plus1"></div>
            <div class="plus2"></div>
            <div class="plus3"></div>
        </div>
    </div>
</body>
</html>